<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>1.插值与指令</title>
    <!-- 引入vue.js -->
    <script type="text/javascript" src="../../js/vue.js"></script>
  </head>
  <body>
    <!-- 准备一个容器 -->
    <!-- 
        1. 在Vue的世界中，有两种模板语法，分别是：插值语法、指令语法 
        2. 插值语法专门用于：操作标签体
        3. 指令语法专门用于：操作标签（标签属性、标签体、标签事件、循环标签）
    -->
    <div id="demo">
      <!-- 下面的h1标签使用了插值语法 -->
      <h1>学校名称：{{school}}</h1>
      
      <!-- 下面的a标签使用了指令语法 -->
      <a 
        v-bind:href="url"
        a="url" 
        v-bind:b="url" 
        c="1+1" 
        v-bind:d="1+1"
        e="url.toUpperCase()"
        v-bind:f="url.toUpperCase()"
      >
        点我去{{school}}学习
      </a>
    </div>

    <script>
      new Vue({
        el:'#demo',
        data:{
          school:'尚硅谷',
          url:'http://www.atguigu.com'
        }
      })
    </script>
  </body>
</html>